<template>
  <div class="mian">
    <div
      @click="dialogVisible = true"
      class="exhibitionName"
      v-if="indexdata.exhibitionInfo"
    >
      {{ indexdata.exhibitionInfo.exhibitionName + " 点击切换展会" }}
    </div>
    <!-- 轮播图 -->
    <!-- <div class="carousel">
      <el-carousel height="420px" :interval="5000" arrow="always">
        <el-carousel-item v-for="item in imglist" :key="item">
          <div class="for_img">
            <img :src="item" alt="" />
          </div>
        </el-carousel-item>
      </el-carousel>
    </div> -->
    <!-- 图标导航栏 -->
    <div class="carousel">
      <div class="icon_nav">
        <div
          class="nav_row"
          v-for="item in navlist"
          :key="item.id"
          @click="hanldpath(item.path)"
        >
          <div class="nav_img">
            <img :src="item.img" alt="" />
          </div>
          <div class="nav_right">
            <div class="nav_titel">{{ item.titel }}</div>
            <!-- <div class="nav_nr">
              {{ item.nr }}
            </div> -->
          </div>
        </div>
      </div>
    </div>
    <!-- 资料下载 -->
    <div class="carousel">
      <div class="titel">
        <div class="borde"></div>
        <div class="titel_text">资料下载</div>
      </div>
      <div class="upoad_fil">
        <div class="fil_warp">
          <el-checkbox-group class="for_check" v-model="checkList">
            <el-checkbox
              v-for="item in fileList"
              :key="item.id"
              :label="item.id"
            >
              {{ item.fileName }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
        <div class="fil_but">
          <el-button @click="upoadfill" type="primary">下载</el-button>
        </div>
      </div>
    </div>
    <!-- 展会安排时间 -->
    <div class="carousel">
      <div class="titel">
        <div class="borde"></div>
        <div class="titel_text">展会安排时间</div>
      </div>
      <div class="time_wrap">
        <div @click="prev" class="left_jiantou">
          <!-- <el-button type="text" icon="el-icon-back"></el-button> -->
          <img src="../../../static/images/nav/left.png" alt="" />
        </div>
        <div class="centen">
          <div
            class="time_row"
            :style="{
              'margin-left': num * 480 + 8 + 'px',
              transition: 'all .3s ease-out .1s',
            }"
          >
            <div class="time_item" v-for="item in tiemlist" :key="item.id">
              <div class="tiem_box">
                <div class="time_titel">{{ item.titel }}</div>
                <div class="time_text">
                  <div class="">从{{ item.statime }}</div>
                  <div class="">至{{ item.endtime }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div @click="next" class="right_jiantou">
          <img src="../../../static/images/nav/right.png" alt="" />
        </div>
      </div>
    </div>
    <!-- 项目联系人 -->
    <div class="carousel">
      <div class="titel">
        <div class="borde"></div>
        <div class="titel_text">项目联系人</div>
      </div>
      <div class="project_row">
        <div class="project_for" v-for="item in projectlist" :key="item.id">
          <div class="project_item">
            <div class="project_titel">{{ item.position }}</div>
            <div class="project_text">{{ item.nr }}</div>
          </div>
          <div class="project_box">
            <div class="box_text">
              <div class="project_lxr">{{ item.name }}</div>
              <div>{{ item.zj }}</div>
              <div>{{ item.telephone }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="展会"
      :visible.sync="dialogVisible"
      width="700px"
      :before-close="dialogClose"
    >
      <el-form
        label-position="left"
        :inline="true"
        ref="formref"
        :model="queryParams"
        class="demo-form-inline"
      >
        <el-form-item label="展会名称:">
          <el-input
            @keyup.enter.native="getlist"
            v-model="queryParams.exhibitionName"
            placeholder="请输入展会名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="开展时间:">
          <el-date-picker
            @change="getlist"
            value-format="yyyy 年 MM 月"
            v-model="queryParams.btendTime"
            type="month"
            placeholder="请选择开展时间"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div class="zh_list">
        <div
          class="zh_for"
          @click="handleClose(item)"
          v-for="item in exhibitionlist"
          :key="item.id"
        >
          <div class="for_demonstration">{{ item.createTime }}</div>
          <div class="for_center">
            <div class="for_left">
              <div class="for_right_img">
                <img :src="item.showUrls" alt="" />
              </div>
              <div class="item_text">
                <div>{{ item.exhibitionName }}</div>
                <div class="item_time">
                  {{ item.startTime + " " + item.endTime }}
                </div>
              </div>
            </div>
            <div class="for_left">
              <img src="../../../static/images/nav/right.png" alt="" />
            </div>
          </div>
        </div>
      </div>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span> -->
    </el-dialog>
  </div>
</template>
<script>
import { getCirPic, exhibition_list, getfile, getIndexInfo } from "@/api/home";
import { getToken, setToken } from "@/utils/auth";
export default {
  data() {
    return {
      exhibitionlist: [],
      exhibitiondata: {},
      zhtime: "",
      formInline: {},
      dialogVisible: true,
      num: 0,
      checkList: [],
      checkdata: [],
      imglist: [],
      navlist: [
        {
          id: 1,
          img: require("../../../static/images/backroungcs1.jpg"),
          titel: "特装",
          nr: "特装展位提交报图资料",
          path: "/applyRecord",
        },
        {
          id: 2,
          img: require("../../../static/images/brackround.jpg"),
          titel: "标展",
          nr: "展位缴纳展会费用入口",
          path: "/exhibition",
        },
      ],
      tiemlist: [
        {
          id: 1,
          titel: "第一阶段报馆时间",
          statime: "",
          endtime: "",
        },
        {
          id: 2,
          titel: "第二阶段报馆时间",
          starttime: "",
          endtime: "",
        },
        {
          id: 3,
          titel: "搭建商报到时间",
          statime: "",
          endtime: "",
        },
        {
          id: 4,
          titel: "参展商报到时间",
          statime: "",
          endtime: "",
        },
        {
          id: 5,
          titel: "布展时间",
          statime: "",
          endtime: "",
        },
        {
          id: 6,
          titel: "开展时间",
          statime: "",
          endtime: "",
        },
        {
          id: 7,
          titel: "撤展时间",
          statime: "",
          endtime: "",
        },
        {
          id: 8,
          titel: "终止时间",
          statime: "",
          endtime: "",
        },
      ],
      projectlist: [],
      queryParams: {
        page: 1,
        pageSize: 10,
        exhibitionName: "",
        start_time: "",
      },
      indexdata: {},

      fileList: [], // 资料下载数据
    };
  },
  created() {
    let exhibitionId = this.$route.query.exhibitionId;
    if (exhibitionId) {
      this.getinfo(exhibitionId);
    } else if (getToken("exhibition") || this.$route.path == "/exhibitionId") {
      this.dialogVisible = false;
      if (getToken("exhibition")) {
        this.exhibitiondata = JSON.parse(getToken("exhibition"));
        this.getinfo(this.exhibitiondata.id);
      }
    }
    this.getlist();
  },
  methods: {
    // 获取首页信息
    getinfo(infoid) {
      getIndexInfo(infoid).then((res) => {
        console.log(res);
        this.fileList = [];
        if (res.data.fileList) {
          res.data.fileList.forEach((item, index) => {
            if (item.filePos == 3) {
              this.fileList.push(item);
            }
          });
        }

        this.indexdata = res.data;
        this.projectlist = res.data.allocation;
        this.tiemlist[0].statime = res.data.exhibitionInfo.startTime1.substring(
          0,
          10
        );
        this.tiemlist[0].endtime = res.data.exhibitionInfo.endTime1.substring(
          0,
          10
        );
        this.tiemlist[2].statime = res.data.exhibitionInfo.startTime2.substring(
          0,
          10
        );
        this.tiemlist[2].endtime = res.data.exhibitionInfo.endTime2.substring(
          0,
          10
        );
        this.tiemlist[3].statime = res.data.exhibitionInfo.startTime3.substring(
          0,
          10
        );
        this.tiemlist[3].endtime = res.data.exhibitionInfo.endTime3.substring(
          0,
          10
        );
        this.tiemlist[4].statime = res.data.exhibitionInfo.startTime4.substring(
          0,
          10
        );
        this.tiemlist[4].endtime = res.data.exhibitionInfo.endTime4.substring(
          0,
          10
        );
        this.tiemlist[5].statime = res.data.exhibitionInfo.startTime5.substring(
          0,
          10
        );
        this.tiemlist[5].endtime = res.data.exhibitionInfo.endTime5.substring(
          0,
          10
        );
        this.tiemlist[6].statime = res.data.exhibitionInfo.startTime6.substring(
          0,
          10
        );
        this.tiemlist[7].endtime = res.data.exhibitionInfo.endTime6.substring(
          0,
          10
        );
        this.tiemlist[8].statime = res.data.exhibitionInfo.startTime1.substring(
          0,
          10
        );
        this.tiemlist[8].endtime = res.data.exhibitionInfo.endTime.substring(
          0,
          10
        );
        this.imglist = res.data.exhibitionInfo.showUrls.split(",");
      });
    },
    // 获取资料下载
    getfile(fillid) {
      getfile(fillid).then((res) => {
        this.checkdata = [];
        let arr = res.rows;
        this.checkdata = arr.filter((item) => (item.filePos = 3));
      });
    },
    // 资料下载
    upoadfill() {
      for (let i = 0; i < this.checkList.length; i++) {
        this.$download.downLoadFile(this.checkList[i]);
      }
    },
    hanldenter() {
      console.log("12");
    },
    // 获取展会列表
    getlist() {
      exhibition_list(this.queryParams).then((res) => {
        this.exhibitionlist = res.rows;
      });
    },
    changetime(val) {
      this.getlist();
    },
    // 获取轮播图
    getcirpic() {
      getCirPic().then((res) => {
        console.log(res);
      });
    },
    handleClose(row) {
      console.log(row);
      setToken("exhibition", JSON.stringify(row));
      console.log(JSON.parse(getToken("exhibition")).id);
      this.getinfo(row.id);
      this.dialogClose();
    },
    // 左箭头
    prev() {
      if (this.num >= 0) {
        return false;
      } else {
        this.num += 1;
      }
      console.log(this.num);
    },
    // 右箭头
    next() {
      if (this.num < -1) {
        return false;
      } else {
        this.num -= 1;
      }
      console.log(this.num);
    },
    hanldpath(path) {
      console.log(path);
      this.$router.push(path);
    },
    // 弹窗的关闭事件
    dialogClose() {
      this.$refs.formref.resetFields();
      this.dialogVisible = false;
    },
  },
};
</script>
<style scoped>
.mian {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: 0;
  padding: 0;
  align-items: center;
}
.carousel {
  width: 1100px;
  margin: 20px 0;
}
.exhibitionName {
  background-color: #ffffff;
  width: 1100px;
  text-align: center;
  border-radius: 5px;
  border: 0;
  padding: 10px 0;
  font-size: 15px;
  color: #3f3f3f;
}
.exhibitionName:hover {
  cursor: pointer;
}
.for_img img {
  width: 100%;
  height: 100%;
  object-fit: fill;
}
.titel {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}
.borde {
  width: 4px;
  height: 18px;
  background-color: #d10100;
}
.titel_text {
  margin-left: 20px;
  font-size: 20px;
}
.upoad_fil {
  background-color: #fff;
  border: 1px solid #e0e2e6;
  padding: 20px;
}
.for_check {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
}
/deep/.el-checkbox {
  font-size: 30px !important;
}
.fil_but {
  padding: 10px 20px;
  display: flex;
  justify-content: flex-end;
}
.icon_nav {
  background-color: black;
  display: flex;
}
.nav_row {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.nav_img {
  -webkit-transition: all 500ms cubic-bezier(0.02, 0.01, 0.47, 1);

  transition: all 500ms cubic-bezier(0.02, 0.01, 0.47, 1);
}
.nav_img img {
  width: 100%;
  height: 600px;
  object-fit: contain;
}
.nav_right {
  position: relative;
  top: 50%;
  right: 50%;
  transform: translate(-50%, -50%);
  top: 0%;
  z-index: 999;
  font-size: 20px;
  /* color: #fff; */
}
.nav_titel {
  font-size: 18px;
  font-family:fangsong;
  letter-spacing:10px;
  /* font-weight: bold; */
  color: #fff;
  writing-mode: tb-rl;
}
.nav_nr {
  font-size: 12px;
   color: #d1d1d1;
}
.nav_row:hover {
  cursor: pointer;

  transition: 1s;
}
.nav_img:hover {
  opacity: 0.6;
  box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15);
  transform: translate(0, -10px);
  transition-delay: 0s !important;
}
.time_wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 40px;
}
.tiem_box {
  width: 236px;
  border: 1px solid #e0e2e6;
}
.time_row {
  width: 100%;
  /* margin: auto; */
  display: flex;
  /* justify-content: center; */
  align-items: center;
}
.left_jiantou {
  width: 80px;
}
.left_jiantou > img {
  width: 40px;
  object-fit: contain;
}
.centen {
  width: 100%;
  overflow: hidden;
}
.right_jiantou {
  width: 80px;
  display: flex;
  justify-content: flex-end;
}
.right_jiantou > img {
  width: 40px;
  object-fit: contain;
}
.time_titel {
  text-align: center;
  padding: 15px;
  border-bottom: 1px solid #e0e2e6;
}
.time_text {
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.project_row {
  display: flex;
}
.project_for {
  width: 240px;
  height: 280px;
  background: #fff;
  box-shadow: 0 2px 8px 0 hsl(0deg 0% 73% / 60%);
  margin-right: 40px;
  margin-bottom: 30px;
  padding: 30px 20px;
}
.project_titel {
  font-size: 18px;
  margin-bottom: 10px;
}
.project_box {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box_text {
  width: 200px;
  height: 120px;
  background-color: #f6f6f6;
  padding: 20px;
}
.project_lxr {
  margin-bottom: 20px;
}
.zh_list {
  margin-top: 20px;
  max-height: 400px;
  overflow-x: hidden;
  overflow-y: scroll;
}
.zh_list::-webkit-scrollbar {
  display: none;
}
.zh_for:hover {
  cursor: pointer;
}
.for_demonstration {
  padding: 10px 20px;
  background-color: #edf0f4;
  color: #666;
  font-size: 14px;
}
.for_center {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 10px;
}
.for_left img {
  width: 20px;
  object-fit: contain;
}
.for_left {
  display: flex;
  align-items: center;
}
.for_right_img {
  border: 1px solid #edf0f4;
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.for_right_img img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}
.item_time {
  margin-top: 20px;
}
.item_text {
  margin-left: 20px;
}
.time_item {
  width: 25%;
}
</style>